<template>
	<view>
		<van-nav-bar title="搜索" left-text="返回" @click-left="back" left-arrow custom-style="padding-top:0">
		</van-nav-bar>
		<van-cell-group>
			<van-field :value="real_name" label="姓名" placeholder="请输入姓名" input-align="right" icon-class="demo-icon" />
			<van-cell title="开始日期" is-link clickable :value="startTime" @click="onshowTimePopup('start')" />
			<van-cell title="截止日期" is-link clickable :value="endTime" @click="onshowTimePopup('end')" />
		</van-cell-group>
		<wrap>
			<button class="submit-button">提交</button>
		</wrap>


		<van-popup :show="showTimePopup" @close="onClose" position="bottom" custom-style="height: 40%;">
			<van-datetime-picker type="date" :value="currentDate" :min-date="minDate " @confirm="onConfim"
				:formatter="formatter" />
		</van-popup>
		<van-notify id="van-notify" />
		<van-toast id="van-toast"></van-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				timeStatus: "",
				real_name: "",
				startTime: "请输入开始时间",
				endTime: "请输入结束时间",
				showTimePopup: false,
				minDate: new Date('2019-7-1').getTime(),
				currentDate: new Date().getTime(),
				formatter(type, value) {
					if (type === 'year') {
						return `${value}年`;
					}
					if (type === 'month') {
						return `${value}月`;
					}
					return value;
				},
			};
		},
		methods: {
			onClose() {
				this.showTimePopup = false;
			},
			onshowTimePopup(status) {
				this.timeStatus = status;
				this.showTimePopup = true;
			},
			onConfim(e) {
				const {
					detail,
				} = e;
				console.log(e)
				this.currentDate = detail
				switch (this.timeStatus) {
					case "start":
						this.startTime = new Date(detail).toLocaleDateString();
						this.minDate = detail
						break;
					case "end":
						this.endTime = new Date(detail).toLocaleDateString();
						break;
				}
				// console.log(e)
				this.onClose()
			},
			onCancel() {
				this.onClose()
			},
			back() {
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss">
	@import "./index.scss"
</style>
